$header-font-size: 28px;
$header-height: 80px;
// side-menu
$side-menu-bg-color: #f4f7fb;
$side-menu-active-color: #0080ff;
$side-menu-text-color: #666;
$side-menu-wraper-color: #666;
$side-menu-border-color: #e8e9f0;
// info-bar
$info-bar-font-size: 14px;
$info-bar-text-color: #333;
$info-bar-active-color: #ff6600;
$info-bar-bg-color: #f7f8fb;
$info-bar-height:60px;
// card-item
$card-container-bg-color: #fbfcfd;
$label-bg-color: #ced1df;
$label-active-bg-color: #0080ff;
$label-text-color: #666;
$item-border-color: #e8e9f0;
$left-circle-bg-color: #ced1df;
$left-circle-text-color: #8991b1;
$circle-font-size: 20px;
$right-circle-bg-color: #e8e9f0;
$right-circle-text-color: #c1c6d7;
$highlight-color: #ff6600;
$name-color: #333;
$name-font-size: 28px;
$phone-font-size: 14px;
$address-label-color:#6c6c6c;
$card-item-height: 230px;
// table
$table-text-font-size: 14px;
$table-head-bg-color: #f7f7fb;
$table-head-border-color: #e8e9f0;
$table-cell-bg-color1: #fff;
$table-cell-bg-color2: #e7e7f3;

.result-container{
    height: 100%;
   .header {
       height:$header-height;
       background-image: url(/static/img/global_header.png);
       background-size: cover;
       background-position: center center;
       text-align:left;
       padding: 0 40px;
       .title{
           font-size: $header-font-size;
           line-height: $header-height;
           color: #fff;
       }
   }
   .side-menu{
       padding: 20px;
       box-sizing: border-box;
       background-color:$side-menu-bg-color;
       border-right:1px solid $side-menu-border-color;
       .el-tree{
           background-color: $side-menu-bg-color;
           .custom-tree-node{
               width:165px;
               .node {
                   padding:3px 5px;
               }
               .active{
                   background-color:$side-menu-active-color;
                   color:#fff;
               }
           }
       }
   }
   .right-container{
       padding: 0;
       box-sizing: border-box;
   }
   .info-bar{
       height: $info-bar-height;
       background-color: $info-bar-bg-color;
       font-size: $info-bar-font-size;
       color: $info-bar-text-color;
       padding: 0 15px;
       border-bottom: 1px solid $table-head-border-color;
   }
   .txt-block{
       float:left;
       line-height: $info-bar-height;
       margin-right:20px;
       font-size: $info-bar-font-size;
       .lb,.val{
           float:left;
       }
       .lb{
           color:$info-bar-text-color;
           margin-right: 5px;
           &:after{
               content: ':';
           }
       }
       .val{
           color: $info-bar-active-color;
       }
   }
   .search-input{
       float:right;
       width: 180px;
       padding-top: 10px;
       .el-input__suffix{
           padding-top: 10px;
           box-sizing: border-box;
           cursor: pointer;
       }
   }
   .switcher{
     &__con{
        float: right;
        height: $info-bar-height;
        padding: 10px;
        box-sizing: border-box;
     }
     &-block{
        float:right;
        width: 38px;
        display:block;
        height: 38px;
        font-size: 20px;
        line-height: 35px;
        color: #0080ff;
        border: 1px solid #e8e9f0;
        padding: 0;
        text-align: center;
        box-sizing: border-box;
        cursor: pointer;
       cursor: pointer;
       &.active{
           background-color: $label-active-bg-color;
           color: #fff;
       }
     }
  }
  .export-btn{
      &__con{
      float:right;
      margin-top: 10px;
      margin-right: 10px;
      .iconfont-page{
        color: $label-active-bg-color;
        margin-right: 5px;
      }
    }
  }
  .container-list, .container-card {
      height: 100%;
      box-sizing: border-box;
  }
  .container-list {
    height: calc(100vh - 142px);
    .list__con{
        height: calc(100% - 60px);
        .el-table th{
            border-color: $table-head-border-color;
            background-color:$table-head-bg-color;
        }
        .el-table--striped .el-table__body tr.el-table__row--striped td{
            background-color: $table-head-bg-color;
        }
        .el-table__body tr.hover-row > td{
            background-color: $table-cell-bg-color2;
        }
        .el-table__body tr.current-row > td{
            background-color: $table-cell-bg-color2;
        }
    }
    .pager__con{
          width: 100%;
          height: 60px;
          box-sizing: border-box;
          padding-top:15px;
          text-align:center;
      .pager{
          max-width: 800px;
          margin:0 auto;
      }
    }
  }
  .container-card{
    height: calc(100vh - 142px);
    background-color: $card-container-bg-color;
      .card-item{
          padding:15px;
          box-sizing: border-box;
          mark{
            background-color: transparent;
            color: $highlight-color;
        }
          .item{
              position: relative;
              height: $card-item-height;
              border: 1px solid $label-bg-color;
              padding:20px;
              box-sizing: border-box;
          }
          &.active, &:hover{
              .detail-mark{
                border-color: transparent transparent $label-active-bg-color transparent;
              }
              .detail-mark-text{
                  color:#fff;
              }
              .item{
                border: 1px solid $label-active-bg-color;
              }
          }
          .order-num{
              font-size: 18px;
             line-height: 40px;
             padding-left: 50px;
             font-weight: bold;
             .lb{
                 color: $label-text-color;
             }
             .val{
                 color: #000;
             }
          }
          .persons {
              border-bottom: 1px solid $item-border-color;
              height: 80px;
              width: 100%;
              display:flex;
              flex-flow: row nowrap;
              align-content: stretch;
              padding: 5px 0;
              margin-bottom: 5px;
             .person{
                 .circle{
                     background-color: $left-circle-bg-color;
                     color: $left-circle-text-color;
                     width: 60px;
                     height: 60px;
                     text-align: center;
                     line-height: 60px;
                     font-size: 20px;
                     font-weight: bold;
                     border-radius: 50%;
                     float:left;
                 }
                 .p{
                     float:left;
                     padding-left: 15px;
                     .name{
                         font-size: $name-font-size;
                         color: $name-color;
                         font-weight: bold;
                         line-height: $name-font-size + 20;
                     }
                     .phone{
                         font-size:$phone-font-size;
                         color: $label-active-bg-color;
                     }
                 }
             }
             .arrow-to {
                 flex: 1;
                 text-align:center;
                 padding-top: 10px;
                 .arrow{
                     width: 100%;
                     position:relative;
                     margin-top: 5px;
                     .iconfont-page{
                         font-size: 30px;
                         margin-top: -4px;
                     }
                     .begin{
                         position:absolute;
                         left: 0;
                         color:$right-circle-bg-color;
                     }
                     .line{
                         position:absolute;
                       display:block;
                       background-color: $right-circle-bg-color;
                       height: 2px;
                       top: 10px;
                       left:5px;
                       width: calc(100% - 25px);
                       margin: 0 10px;
                     }
                     .end{
                        position:absolute;
                        right: 0;
                        color:$right-circle-bg-color;
                     }
                 }
             }
          }
          .address-block{
            line-height: 16px;
            font-size: 14px;
            display:flex;
            height: 70px;
            flex-flow: column nowrap;
            justify-content: space-around;
            align-content: stretch;
            .address{
                margin-bottom:5px;
                .lb{
                    color:$address-label-color;
                }
            }
          }
      }
  }
  .xdh-scroll-loader{
      position:absolute;
      bottom: 50px;
      width: 100%;
      z-index: 9999;
      text-align:center;
      color: #666;
  }
}

.detail-mark {
    content: '';
    width: 0;
    height: 0;
    border: 40px solid;
    position: absolute;
    top: -40px;
    left: -40px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border-color: transparent transparent $label-bg-color transparent;
  }
  .detail-mark-text {
    position: absolute;
    top: 1px;
    left: 5px;
    color: $label-text-color;
    font-weight: bold;
  }